<template>
  <div>
    <div class="conditionRow">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="姓名" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入姓名"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="手机号" prop="phone">
         <el-input
           v-model="queryParams.phone"
           placeholder="请输入手机号"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="注册时间">
         <el-date-picker
           v-model="dateRange"
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="timeChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空条件</el-button>
       </el-form-item>
     </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
    >
      <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
      <el-table-column label="账号" align="center" prop="salesmanNumber" :show-overflow-tooltip="true" />
      <el-table-column label="密码" align="center" prop="salesmanPassword" :show-overflow-tooltip="true" />
      <el-table-column label="注册时间" align="center" prop="registerTime" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            @click="handleForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >编辑</el-button>
          <el-button
            :type="scope.row.status==1?'danger':'primary'"
            plain
            @click="changeStatusClick(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >{{scope.row.status==1?'冻结':'解封'}}</el-button>
          <el-button
            type="danger"
            plain
            @click="delForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      layout="total, prev, pager, next,sizes,jumper"
      @pagination="getList"
    />
    <!-- 修改信息 -->
    <el-dialog title="业务员详情" :visible.sync="openDetail" width="700px" append-to-body >
        <div class="synthesizebox">
            <el-form ref="form" :model="synthesform" label-width="120px">
              <el-form-item label="姓名">
                <el-input v-model="synthesform.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="synthesform.phone" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="synthesform.salesmanNumber"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="synthesform.salesmanPassword"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listSalesman, getSalesman, updateSalesman, delSalesman } from "@/api/user/salesman";
  export default {
      data(){
        return{
          // 显示搜索条件
          showSearch: true,
          // 查询参数
          queryParams: {
            currentPage: 1,
            pageSize: 10,
            name: null,
            phone: null,
            searchTimeBegin: null,
            searchTimeEnd: null
          },
          // 日期范围
          dateRange: [],
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 表格数据
          list: [],
          currentPage: 1,
          pageSize: 10,
          openDetail:false,
          synthesform:{}
        }
      },
      created() {
        this.getList();
      },
      methods:{
        //删除业务员
        delForceLogout(data){
          this.$confirm('是否将'+data.name+'账号删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            delSalesman(data.id).then(response => {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              setTimeout(()=>{
                this.getList();
              },1500)
            });
          }).catch(() => {});
        },
        //提交修改信息
        onSubmit(){
          let queryParams={
            id:this.synthesform.id,
            name:this.synthesform.name,
            phone:this.synthesform.phone,
            salesmanNumber:this.synthesform.salesmanNumber,
            salesmanPassword:this.synthesform.salesmanPassword
          }
          for(let i in queryParams){
            if(!queryParams[i]){
              this.$message({
                type: 'warning',
                message:"请完整输入信息"
              });
              return
            }
          }
          updateSalesman(queryParams).then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            });
            this.openDetail=false
            setTimeout(()=>{
              this.getList();
            },1500)
          });
        },
        //冻结/解封
          changeStatusClick(data){
            this.$confirm('是否将'+data.name+'账号'+(data.status==1?'冻结？':'解封？'), '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              let queryParams={
                id:data.id,
                status:data.status==1?0:1
              }
              updateSalesman(queryParams).then(response => {
                this.$message({
                  type: 'success',
                  message: queryParams.status==1?'解封成功':'冻结成功'
                });
                setTimeout(()=>{
                  this.getList();
                },1500)
              });
            }).catch(() => {});
        },
        timeChange(time){
          if(time){
            this.queryParams.searchTimeBegin=time[0]
            this.queryParams.searchTimeEnd=time[1]
          }else{
            this.queryParams.searchTimeBegin=null
            this.queryParams.searchTimeEnd=null
          }
          this.handleQuery()
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          for(let i in this.queryParams){
            if(!this.queryParams[i]) this.queryParams[i]=null
          }
          listSalesman(this.queryParams).then(response => {
            this.list = response.records;
            this.total = response.total;
            this.loading = false;

          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.currentPage = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.queryParams.searchTimeBegin=''
          this.queryParams.searchTimeEnd=''
          this.dateRange=[]
          console.log(this.queryParams)
          this.handleQuery();
        },
        handleForceLogout(data){
          getSalesman(data.id).then(response=>{
             this.synthesform=JSON.parse(JSON.stringify(response.data))
             this.openDetail=true
          })
        }
      }
  }
</script>

<style lang="scss" scoped>
  .contbox{
    margin: 0 40px;
    .boxrow{
      display: flex;
      font-size: 14px;
      margin-bottom: 18px;
      color: #333;
      .name{
        font-weight: bold;
      }
      .tex{
        max-width: 350px;
      }
      .lump{
        display: flex;
        margin-right: 30px;
      }
      .img{
          max-width: 350px;
      }
      .userrow1{
        display: flex;
        align-items: center;
        .userimg{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .usertex{
          color: #333;
          font-size: 14px;
          margin-left: 20px;
        }
      }
    }
  }
</style>
